<template>
    <div class="img">
        <el-icon class="icon"><UploadFilled /></el-icon>
        <input type="file" name="" id="" @change="change">
    </div>
</template>
<script setup lang='ts'>
import {upload} from "../api/system"
const emit=defineEmits()
const change=async (e:Obj)=>{
    // console.log(e.target.files[0]);
    let params:FormData=new FormData()
    params.append("file",e?.target?.files[0])
   let res:ResData=await upload(params) as ResData
   if(res.code==200){
      emit('onchange',res.data)
   }
    
}

export interface ImgData{
    filename:string
    fileurl:string
}
</script>
<style scoped lang="less">
  .img{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px dashed gainsboro;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transition: all linear .5s;

    input{
        font-size: 100px;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
    }
    .icon{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
        color: gainsboro;
        transition: all linear .5s;
    }
  }

  .img:hover{
    border: 1px dashed rgb(13, 159, 237);
  }
  .img:hover .icon{
    color: rgb(13, 159, 237);
  }
</style>
